Code Blocks

We can put some fancy code environments…

… e.g. Python …

print("Hello World!")
f = lambda x: x^2

… or Julia …

println("Hello World!")
f(x) = x^2

Equations

If we need some equations, we can just write latex and it will be rendered using mathjax:

For example,

$$
V(x_{0})\;=\;\max _{\left\{a_{t}\right\}_{t=0}^{\infty }}\sum _{t=0}^{\infty }\beta
^{t}F(x_{t},a_{t}).
$$

is rendered as

\[ V(x_{0})\;=\;\max _{\left\{a_{t}\right\}_{t=0}^{\infty }}\sum _{t=0}^{\infty }\beta ^{t}F(x_{t},a_{t}). \]

Lists

This is what bullet points…

• something something
  • sub-something
• something else
• or even more

… you can also display these in incremental order

Tables

Static Images

If we want to include an image, we can simply do this

![The Image Caption.](path/to/image.png){width="40%"}

Animations

And since these are html-slides, nothing stops you from using gifs or video formats here:

Videos

Or simply embed a YouTube Video:

Multi-Column Layouts

What about multi-column? Just use pandoc’s fencing syntax for <div/> tags:

::: {style="float: left; width: 33%"}

Something in the left column.

:::

Text Alignment

Sometimes, one might want the text to be left-aligned. To achieve this, just create a fenced div block and add the corresponding CSS style options. If you do this a lot, consider making a class and add it to the custom.css.

Fragments

Often it is useful to change fragments of a slide to display additional content or highlight some section of the text.

This can be achieved by adding the .fragment class to a pandoc span:

[highlighting some section of the text]{.fragment .highlight-blue}